<template>
  <div>
    <h1>props height,</h1>

    <h2>default undefined</h2>
    <!-- <p v-html="mixValue"></p> -->
    <kb-input
      v-model="mixValue1"
      :inputProps="{
        placeholder: 'Any string',
        allowEnter: true,
        inputLang: 'en',
      }"
    />

    <h6
      style="
        line-height: 1.4;
        margin: 0;
        margin-block-start: 0;
        margin-block-end: 0;
      "
    >
      height="80px"
    </h6>
    <div style="margin: 0; padding: 0; font-size: 12px">
      If the height is fixed, diplay must be set to block, otherwise scrolltop
      will be set to 0, but in fact it does not scroll to the top
    </div>
    <!-- <p v-html="mixValue"></p> -->
    <!-- If the height is fixed, diplay must be set to block, 
    otherwise scrolltop will be set to 0, but in fact it does not scroll to the top -->

    <kb-input
      v-model="mixValue"
      :inputProps="{
        height: '80px',
        placeholder: 'Any string',
        allowEnter: true,
        inputLang: 'en',
      }"
    />

    <kb-board :emojiMap="emoji" />
    <div style="height: 800px"></div>
  </div>
</template>

<script>
import { person, hearts, symbo } from "../dev/enumerate/emojiImages";

export default {
  name: "App",
  data() {
    return {
      emoji: {
        person,
        hearts,
        symbo,
      },
      mixValue: `hello
,world!!

123
234`,
      mixValue1: `hello
,world!!`,
    };
  },
  methods: {
    submitFn(val) {
      console.log("input 的submit事件", val);
    },
    showStatus(data) {
      console.log("监听键盘显示隐藏", data);
    },
    inputFn({ el, value }) {
      console.log("input", el, value);
    },
    focusFn({ el, value }) {
      console.log("focus", el, value);
    },
    blurFn({ el, value }) {
      console.log("blur", el, value);
    },
  },
};
</script>

<style>
p {
  word-wrap: break-word;
  white-space: pre-wrap;
}
</style>
